<template>
  <div>
    <el-container :class="{ 'is-collapsed': isCollapse }">
      <!-- 侧边栏 -->
      <el-aside :width="asideWidth" style="min-height: 100vh; background-color: #001529">
        <div class="shell">
          <ul class="nav">
            <li class="active" id="logo">
              <router-link to="#">
                <div class="icon">
                  <div class="imageBox">
                    <img src="@/assets/img/logo.png" alt="">
                  </div>
                </div>
                <div class="text">小站</div>
              </router-link>
            </li>
            <li>
              <router-link to="/home">
                <div class="icon">
                  <i class="el-icon-s-home"></i>
                </div>
                <div class="text">系统首页</div>
              </router-link>
            </li>
            <li v-if="user.role === '管理员'">
              <div @click="toggleInfoMenu">
                <div class="icon">
                  <i class="el-icon-menu"></i>
                </div>
                <div class="text">信息管理</div>
              </div>
              <ul v-show="isInfoMenuOpen">
                <li>
                  <router-link to="/user">
                    <div class="icon">
                      <i class="el-icon-user"></i>
                    </div>
                    <div class="text">用户信息</div>
                  </router-link>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </el-aside>

      <el-container>
        <!-- 头部区域 -->
        <el-header>
          <i :class="collapseIcon" style="font-size: 26px" @click="handleCollapse"></i>
          <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-left: 20px">
            <el-breadcrumb-item :to="{ path: '/' }">主页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: $route.path }">{{ $route.meta.name }}</el-breadcrumb-item>
          </el-breadcrumb>

          <div style="flex: 1; width: 0; display: flex; align-items: center; justify-content: flex-end">
            <i class="el-icon-quanping" style="font-size: 26px" @click="handleFull"></i>
            <el-dropdown placement="bottom">
              <div style="display: flex; align-items: center; cursor: default">
                <img :src="user.avatar || 'https://cube.elemecdn.com/3/7c/3ea6beec64369极客时间c2642b92c6726f1epng.png'" alt="" style="width: 40px; height: 40px; border-radius: 50%; margin: 0 5px">
                <span>{{ user.name }}</span>
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="$router.push('/person')">个人信息</el-dropdown-item>
                <el-dropdown-item @click.native="$router.push('/password')">修改密码</el-dropdown-item>
                <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-header>

        <!-- 主体区域 -->
        <el-main>
          <router-view @update:user="updateUser" />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'HomeView',
  data() {
    return {
      isCollapse: false,  // 侧边栏是否收缩
      isInfoMenuOpen: false,  // 信息管理菜单是否展开
      asideWidth: '200px',
      collapseIcon: 'el-icon-s-fold',
      user: JSON.parse(localStorage.getItem('honey-user') || '{}'),
    }
  },
  mounted() {
    if (!this.user.id) {
      this.$router.push('/login')
    }
  },
  methods: {
    updateUser(user) {
      this.user = JSON.parse(JSON.stringify(user))
    },
    logout() {
      localStorage.removeItem('honey-user')
      this.$router.push('/login')
    },
    handleFull() {
      document.documentElement.requestFullscreen()
    },
    handleCollapse() {
      this.isCollapse = !this.isCollapse;
      this.asideWidth = this.isCollapse ? '64px' : '200px';
      this.collapseIcon = this.isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold';
    },
    toggleInfoMenu() {
      this.isInfoMenuOpen = !this.isInfoMenuOpen
    }
  }
}
</script>

<style scoped>
.el-aside {
  transition: width 0.5s; /* 添加过渡效果 */
}

.el-main {
  margin-left: 200px; /* 默认侧边栏宽度 */
  transition: margin-left 0.5s; /* 添加过渡效果 */
}

/* 侧边栏收缩时的样式 */
.is-collapsed .el-main {
  margin-left: 64px; /* 收缩后的侧边栏宽度 */
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
}

body {
  background: #e4e9f5;
}

.shell {
  width: 200px; /* 默认宽度 */
  height: 100vh; /* 视口高度 */
  background: #000000;
  z-index: 9999;
  transition: width 0.5s;
  padding-left: 10px;
  overflow: hidden;
}


.imageBox {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
}

.imageBox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shell ul {
  position: relative;
  height: 100vh;
}

.shell ul li {
  position: relative;
  padding: 5px 0; /* 调整上下间距 */
}

.active {
  background: #e4e9f5;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
}

.active::before {
  content: "";
  position: absolute;
  top: -30px;
  right: 0;
  width: 30px;
  height: 30px;
  border-bottom-right-radius: 25px;
  box-shadow: 5px 5px 0 5px #e4e9f5;
  background: transparent;
}

.active::after {
  content: "";
  position: absolute;
  bottom: -30px;
  right: 0;
  height: 30px;
  border-top-right-radius: 25px;
  box-shadow: 5px -5px 0 5px #e4e9f5;
  background: transparent;
}

#logo {
  margin: 40px 0 100px 0;
}

.shell ul li a {
  position: relative;
  display: flex;
  white-space: nowrap;
}

.icon {
  min-width: 60px;
  padding-left: 10px;
  height: 70px;
  color: rgb(255, 255, 255);
  display: flex;
  align-items: center;
}

.text {
  font-size: 20px;
  color: #ffad32c1;
  padding-left: 15px;
  white-space: nowrap;
}

.icon i {
  font-size: 30px;
  z-index: 999;
}

.shell ul li:hover a .icon,
.shell ul li:hover a .text {
  color: #ffa117;
}

.active a .icon::before {
  content: "";
  position: absolute;
  inset: 5px;
  width: 60px;
  background: #000000;
  transition: 0.5s;
  border: 7px solid #ffa117;
  box-sizing: border-box;
}
</style>
